//import React from 'react';
import './App.css';
import 'h8k-components';

import Articles from './components/Articles';
import articles from './index';
import React, {Component} from 'react';
  
// Bootstrap for react
/*import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';
import ListGroup from 'react-bootstrap/ListGroup';*/


  
  
class App extends Component  {
  constructor(props) {
    super(props);
  
    // Setting up state
    this.state = {
      userInput : "",
      list:[],
      clickCount:0
    }
  }
  
  // Set a user input value
  updateInput(value){
    this.setState({
      userInput: value,
    });
  }
  
  // Add item if user input in not empty
  addItem(){
    if(this.state.userInput !== '' ){
      const userInput = {
  
        // Add a random id which is used to delete
        id :  Math.random(),
  
        // Add a user value to list
        value : this.state.userInput+"  "+articles[0].title
      };
  
      // Update list
      const list = [...this.state.list];
      list.push(userInput);
  
      //let aList=new Articles();

      this.state.clickCount++;
      console.log("clicked ",this.state.clickCount);
      console.log(articles);
      console.log(articles[0]);
      console.log(articles[0].title);
      console.log(list);
      // reset state
      this.setState({
        list,
        userInput:""
      });
    }
  }
  
  // Function to delete item from list use id to delete
  deleteItem(key){
    const list = [...this.state.list];
  
    // Filter values and leave value which we need to delete
    const updateList = list.filter(item => item.id !== key);
  
    // Update list in state
    this.setState({
      list:updateList,
    });
  
  }
  
  render(){
    return(<div>
  
        <table>
          <tr style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  fontSize: '3rem',
                  fontWeight: 'bolder',
                }}
                >TODO LIST
            </tr>
  
           <hr/>
          <tr>
          <td md={{ span: 5, offset: 4 }}>
  
          <div className="mb-3">
          <input
            placeholder="add item . . . "
            size="lg"
            value = {this.state.userInput}
            onChange = {item => this.updateInput(item.target.value)}
            aria-label="add something"
            aria-describedby="basic-addon2"
          />
          <div>
            <button class="button"
              variant="dark"
              size="lg"
              onClick = {()=>this.addItem()}
              >
              ADD
            </button>
          </div>
        </div>
  
     </td>
   </tr>
   <tr>
     <td md={{ span: 5, offset: 4 }}>
        <ul>
          {/* map over and print items */}
         {this.state.list.map(item => {return(
  
            <li action 
              onClick = { () => this.deleteItem(item.id) }>
              {item.value}
            </li>
  
         )})}
        </ul>
     </td>
   </tr>
   </table>
     </div>
    );
  }
}
  
export default App;
